<template>
  <div>
    <div class="container" >
      
      <OrderInfoForm v-if="infoData" @setTotalPrice="setTotalPrice" :infoData="infoData" />
      <OrderAirInfo v-if="infoData"  :totalPrice="totalPrice" :infoData="infoData" :length="length"/>
    </div>
  </div>
</template>
<script>
import OrderInfoForm from '@/components/air/OrderInfoForm'
import OrderAirInfo from '@/components/air/OrderAirInfo'
export default {
  components: {
    OrderInfoForm,
    OrderAirInfo
  },
  data() {
    return {
      infoData: null,
      totalPrice:0,
      length:0
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const { id, seat_xid } = this.$route.query
      const { data: res } = await this.$axios.get('/airs/' + id, {
        params: { seat_xid }
      })
      this.infoData = res
      console.log(res)
    },
    setTotalPrice({res,length}){
      this.totalPrice = res
      this.length = length
    }
  },
 
}
</script>
<style lang="less" scoped>
.container {
  min-width: 1000px;
  width: 1000px;
  margin: 0 auto;
  // background: pink;
  display: flex;
  padding:20px 0;
}



// 修改elementui样式
/deep/ .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
/deep/ .el-form-item {
  margin-bottom: 15px !important;
}
/deep/ .el-checkbox-group {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    margin-top: 15px;
    width: 290px;
  }
}
/deep/ .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}
</style>